<template>
  <div class="orderListContainer">
    <div class='btn-line'>
        <button class='btn-default' @click='subWeek'>上周</button>
        <div class='date-wrap' @click='showDatePicker'>
            <div class='font-lg'><div>{{year}}</div><div>{{pickerText}}</div></div>
            <i-icon type="activity" size="22" color="#83878a" @click='showModal' />
        </div>
        <button class='btn-default' @click='addWeek'>下周</button>
    </div>
    <div class='info-card-wrap'>
        <scroll-view  style="height:100%" :scroll-y="true" @scrolltolower="scrolltolower">
            <DeviceCard v-for='(item,index) in dataList' :key='index' :item='item' :hide='index==0' cardType='0' @selectDevice='toDetail'/>
        </scroll-view>
    </div>
    <i-modal  :visible="show" :show-ok='false' :show-cancel='false' i-class='week-calendar'>
        <cover-view class='week-title' v-if="show">
            <button class='btn-sm' @click='subTime'>＜</button>
            <cover-view>{{year}}年{{month+1}}月</cover-view>
            <button class='btn-sm' @click='addTime'>＞</button>
        </cover-view>
        <cover-view class='week-wrap' v-if="show">
            <cover-view class='week-line' v-for='(item,index) in dateList' :key='index' @click='changeIndex(index)'>
                <cover-view class='radio-wrap'>
                <cover-image src='/static/images/icon_confirm@3x.png' v-if='selectIndex==index' class='image'/>
                <cover-image src='/static/images/icon_unconfirm.png' v-else  class='image'/>
                <!-- <input type="radio" name="list" :value="index" :checked="selectId==index" class='radio'> -->
                </cover-view>
                <cover-view :class='{active:selectIndex==index}'>第{{index+1}}周 {{item}}</cover-view>
            </cover-view>
        </cover-view>
    </i-modal>
  </div>
</template>

<script type="text/javascript">
import DeviceCard from '@/components/device_card/device_card.vue';
import { mapState } from 'vuex';
import moment from 'moment';
export default {
  data() {
    return {
      tabs:['待派工单','待接工单','已接工单','待审工单'],
      dataList:[],
      unsentOrders: [],
      unacceptedOrders:[],
      acceptedOrders:[],
      finishedOrders:[], 
      minId:0,
      sendTime:0,
      orderId:null,
      urls:['/order/getMyAcceptedOrders','/order/getMyRepairedOrders','/order/getMySentOrders','/order/getMyCheckedOrders'],
      type:0,
      show:false,
      dateList:[],
      year:moment().year(),
      month:moment().month(),
      selectIndex:'',
      pickerText:'',
      nowWeeks:''
    }
  },
  beforeMount() {
      var query = this.$root.$mp.query;
      this.type = query.type;
      this.dateList = [];
      this.minId = 0;
      this.getNowWeek();
      this.getWeekTime();
  },
  methods:{
      showModal(){
          this.show = true;
      },
      getWeekTime(dateStr,type){
        var date = dateStr ? dateStr : `${this.year}-${this.month+1}-01`,
        day = moment(new Date(date)).format('E'),
        last = moment(new Date(date)).endOf('month').format('YYYY-MM-DD'),
        monday = moment(new Date(date)).subtract(day-1, 'days'),
        sunday = moment(new Date(date)).add(7-day, 'days');
        this.dateList.push(`${monday.format('MM/DD')}-${sunday.format('MM/DD')}`)
        let tomorrow  = sunday.add(1,'day'),
            before = tomorrow.isBefore(last),
            same = tomorrow.format('YYYY-MM-DD') == last;
        if(before || same){
            this.getWeekTime(tomorrow.format('YYYY-MM-DD'),type)
        }else{
            var len = this.dateList.length;
            if(type==1){
              this.selectIndex = this.pickerText == this.dateList[len-1]?len-2:len-1;
              this.pickerText = this.dateList[this.selectIndex];
            }else if(type==2){
              this.selectIndex = this.pickerText == this.dateList[0]?1:0;
              this.pickerText = this.dateList[this.selectIndex]
            }else{
              this.selectIndex = this.dateList.indexOf(this.nowWeeks)
            }
        }
      },
      getNowWeek(){
        let day = moment().format('E'),
        monday = moment().subtract(day-1, 'days'),
        sunday = moment().add(7-day, 'days');
        this.nowWeeks = `${monday.format('MM/DD')}-${sunday.format('MM/DD')}`;
        this.pickerText = this.nowWeeks;
        this.queryOrder()
      },
      changeIndex(index){
        this.selectIndex = index;
        this.pickerText = this.dateList[index];
        this.queryOrder();
        this.show = false
      },
      subTime(type){
        var date = moment(`${this.year}-${this.month+1}`).subtract(1, 'month');
        this.year = date.year();
        this.month = date.month();
        this.dateList = [];
        this.minId = 0;
        this.getWeekTime(`${this.year}-${this.month+1}-01`,type)
      },
      addTime(type){
        var date = moment(`${this.year}-${this.month+1}`).add(1, 'month');
        this.year = date.year();
        this.month = date.month();
        this.dateList = [];
        this.minId = 0;
        this.getWeekTime(`${this.year}-${this.month+1}-01`,type) 
      },
      subWeek(){
          this.selectIndex--;
          if(this.selectIndex>-1){
            this.pickerText = this.dateList[this.selectIndex];
            this.queryOrder()
          }else{
            this.subTime(1);
          } 
      },
      addWeek(){
          this.selectIndex++;
          if(this.selectIndex<this.dateList.length){
            this.pickerText = this.dateList[this.selectIndex];
            this.queryOrder()
          }else{
            this.addTime(2);
          } 
      },
      queryOrder(){
          var startTime = this.year+'-'+this.pickerText.split('-')[0];
          var endTime = moment(startTime).add(7,'days').format('YYYY-MM-DD');
          if(this.minId==0) this.dataList = [];
          this.$http.post({
            url:this.urls[this.type],
            data:{
                ukey:this.userInfo.ukey,
                startId:this.minId,
                startTime,
                endTime
            }
           }).then((res)=>{
                if(res.s==0){
                    this.dataList = this.dataList.concat(res.i.Data);
                    
                }
           }).catch((e)=>{
                console.log('请求失败',e)
           })
      },
      scrolltolower(){
         var minIdObj = this.dataList.reduce((prev,cur)=>{
            return prev.orderId<cur.orderId ? prev : cur;
         })
         this.minId = minIdObj.orderId;
         this.queryOrder() 
      },
      toDetail(orderId,orderType){
          wx.navigateTo({
            url:`/pages/order_detail/main?orderId=${orderId}&orderType=${orderType}`
          }) 
      },
  },    
  components: {
    DeviceCard
  },
  computed:{
    ...mapState(['userInfo'])
  }
}
</script>

<style lang='less'>
page{
    background:#eef7fd;
    height:100%;
}
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.orderListContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .info-card-wrap{
        height: 50rpx;
        flex:1;
    }
    .btn-line{
        display: flex;
        justify-content: space-between;
        padding:20rpx;
        border-bottom:2rpx solid #1380d3;
        .date-wrap{
            display: flex
        }
        .font-lg{
            color:#83878a;
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height:36rpx;
            text-align:center;
        }
        .btn-default{
            background:#1380d3;
            color:#fff !important;
            font-size:32rpx;
            border-radius:40rpx;
            height:60rpx;
            line-height:60rpx;
            padding:0;
            margin:0;
            width:150rpx
        }
    }
    .week-calendar{
      position: absolute;
      &{
        view{
         padding-top:0;
         max-height: 100%;
         margin-bottom: 0;
        }
      }
      .week-title{
        background: #1d7ebf;
        color: #fff;
        height: 60rpx;
        line-height: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn-sm{
          width: 56rpx;
          height: 54rpx;
          line-height: 54rpx;
          border: none;
          font-size: 26rpx;
          background: #1d7ebf;
          color: #fff;
          border-radius: 0;
          box-shadow: none;
          &:after{
            border: none;
          }
        }
      }
      .week-wrap{
        .week-line{
          height: 70rpx;
          line-height: 70rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .active{
            color: #1d7ebf
          }
          .radio-wrap{
            width: 60rpx;
            height: 60rpx;
            position: relative;
            .image{
              position: absolute;
              left: 12rpx;
              top: 16rpx;
              width: 36rpx;
              height: 36rpx;
              z-index: 1;
            }
            .radio{
              position:absolute;
              left: 0;
              top: 0;
              z-index: 2;
              opacity: 0;
            }
          }
        }
      }
    }
}
</style>
